<template>
  <div id="find_index">
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <div class="banner">
        <Banner />
      </div>
      <nav class="nav">
        <van-grid :column-num="4"
                  :border="false"
                  :clickable="true">
          <van-grid-item v-for="(item, index) in iconUrlList"
                         :key="index"
                         :to="item.url"
                         @click="handleClick(item)">
            <van-image :style="{ background: globalObj.normColor }"
                       :src="item.iconUrl"
                       width="45"
                       height="45"
                       class="img" />
            <span class="iconName">{{ item.name }}</span>
          </van-grid-item>
          <van-loading style="margin 0 auto"
                       v-if="iconLoading"
                       type="spinner" />
        </van-grid>
      </nav>
      <div class="songSheet">
        <PushSongSheet />
      </div>
    </van-pull-refresh>

    <!-- 私人FM -->
    <privateFM ref="privateFM" />
  </div>
</template>

<script>
import { getHomepage } from '@/api/find'
import Banner from './components/banner'
import PushSongSheet from './components/pushSongSheet'
import privateFM from '@/components/privateFM'
export default {
  name: 'find_index',
  data() {
    return {
      isLoading: false,
      iconUrlList: [],
      iconLoading: false,
    }
  },
  components: { Banner, PushSongSheet, privateFM },
  methods: {
    handleClick(row) {
      if (row.name == '私人FM') {
        this.$refs.privateFM.popupShow = true
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.globalObj.$Toast('刷新成功')
        this.isLoading = false
      }, 1000)
    },
  },
  created() {
    document.title = '发现'
    getHomepage().then(async (res) => {
      this.iconLoading = true
      await res.data.forEach((item, index) => {
        if (item.name == '排行榜') {
          item.url = '/ranking'
          this.iconUrlList.push(item)
        } else if (item.name == '每日推荐') {
          item.url = '/recommendSongs'
          this.iconUrlList.push(item)
        } else if (item.name == '私人FM') {
          item.url = ''
          this.iconUrlList.push(item)
        } else if (item.name == '歌单') {
          item.url = '/songLisSquare'
          this.iconUrlList.push(item)
        }
      })
      // this.iconUrlList.splice(4, 4);
      this.iconLoading = false
    })
  },
}
</script>

<style scoped>
#find_index {
  width: 100%;
  height: 100%;
}
.banner {
  margin: 5px 15px;
}
.iconName {
  font-size: 14px;
  padding-top: 3px;
}
.img {
  border-radius: 50%;
}
.nav {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 10px;
}
.van-loading {
  margin: 0 auto;
}
</style>